<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.CalendarDialogVisible"
           @cancel="closeDialog"
           @ok="closeDialog"
           :modal-title="modalTitle"
           model-size="large">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <hr>
        <div class="row">
        <div class="col-xs-12">
        <vue-event-calendar
                :events="demoEvents"
                @day-changed="handleDayChanged"
                @month-changed="handleMonthChanged"
        ></vue-event-calendar>
        </div>
        </div>
    </modal>


</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                demoEvents: []
            };
        },
        methods: {
            closeDialog: function () {
//                console.log(11);
                this.stateManager.CalendarDialogVisible = false;
                this.stateManager.CalendarModelId = 0;
                this.demoEvents = [];
            },
            getEvents: function () {
                let formData = new FormData();
                formData.append('student_id', this.stateManager.CalendarModelId);
                let config = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
                let self = this;
                axios.post('api/student-calendar', formData, config).then(function (res) {
                    self.demoEvents=res.data;
                })
            },
            handleDayChanged (data) {
                console.log('date-changed', data)
            },
            handleMonthChanged (data) {
                console.log('month-changed', data)
            }
        },
        computed: {
            modalTitle: function () {
                return '查看课程'
            }
        },
        watch: {
            'stateManager.CalendarModelId': function (newValue) {
                this.getEvents();
            }
        }
    }
</script>
<style>
    .events-wrapper{
        overflow-y: auto;
        overflow-x:auto;
    }
    .__vev_calendar-wrapper .events-wrapper .event-item .time{
        position:relative;
        font-size: 12px;
        overflow: hidden;
    }
    .__vev_calendar-wrapper .events-wrapper .event-item  .time{
        margin-bottom: 10px;
        left: 1%;
    }
    .__vev_calendar-wrapper .events-wrapper .event-item .title{
        width: 250px;
    }
    .__vev_calendar-wrapper .events-wrapper .date{
        font-size: 15px;
        max-width: 80%;
    }
    .__vev_calendar-wrapper ::-webkit-scrollbar-track {
         box-shadow: inset 0 0 2px rgb(26, 179, 148);
        border-radius: 5px;
    }
    .__vev_calendar-wrapper ::-webkit-scrollbar-thumb {
        border-radius: 5px;
         background: rgb(26, 179, 148);
    }
</style>